import React from 'react';
import {connect} from 'dva';
import {Modal, Form, Input, Row, Col, Radio, Select, Button, message} from 'antd';
import CustomerTypeSelect from '../components/customerType';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;

const CreateCustomer = ({routes, params, children, location, dispatch, customerManage, form}) => {
    const {editModel} = customerManage;
    const {getFieldDecorator, validateFields} = form;


    const formItemLayout = {
        labelCol: {span: 8},
        wrapperCol: {span: 16}
    };

    const formItemLayout2 = {
        labelCol: {span: 5},
        wrapperCol: {span: 18}
    };

    return (
        <Modal title={editModel.title} visible={editModel.showStatus} width={850} onCancel={
            () => {
                dispatch({
                    type: 'customerManage/setEditModel',
                    payload: {
                        showStatus: false
                    }
                });
            }
        } onOk={
            () => {
                validateFields((errors, values) => {
                    if (errors) {
                        return;
                    }

                    dispatch({
                        type: 'customerManage/createCustomer',
                        payload: {
                            companyname: values.companyname,
                            companynameen: values.companynameen,
                            shortname: values.shortname,
                            ischeckinfo: values.ischeckinfo,
                            companytype: values.companytype.value,
                            businessmodel: values.businessmodel,
                            telephone: values.telephone,
                            mobile: values.mobile,
                            tax: values.tax,
                            invoicetype: values.invoicetype,
                            email: values.email,
                            address: values.address,
                            recaddress: values.recaddress,
                            url: values.url,
                            onSuccess:()=>{
                                this.props.handleSearch();
                            }

                        }
                    });
                })
            }
        }>
            <Form>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="客户名称（中文）"
                            hasFeedback
                        >
                            {getFieldDecorator('companyname', {
                                rules: [{
                                    required: true, message: '请填写客户名称（中文）！',
                                }]
                            })(
                                <Input />
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="客户名称（英文）"
                            hasFeedback
                        >
                            {getFieldDecorator('companynameen', {
                                rules: [{
                                    required: true, message: '请填写客户名称（英文）！',
                                }]
                            })(
                                <Input />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="客户简称"
                            hasFeedback
                        >
                            {getFieldDecorator('shortname', {
                                rules: [{
                                    required: true, message: '请填写客户简称！',
                                }]
                            })(
                                <Input />
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="是否查询企业信用"
                            hasFeedback
                        >
                            {getFieldDecorator('ischeckinfo', {
                                rules: [{
                                    required: true, message: '请填写客户简称！',
                                }],
                                initialValue: 1
                            })(
                                <RadioGroup>
                                    <Radio value={1}>是</Radio>
                                    <Radio value={2}>否</Radio>
                                </RadioGroup>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="企业类型"
                            hasFeedback
                        >
                            {getFieldDecorator('companytype', {
                                rules: [{
                                    required: true, message: '请选择企业类型！'
                                }]
                            })(
                                <CustomerTypeSelect/>
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="经营模式"
                            hasFeedback
                        >
                            {getFieldDecorator('businessmodel', {
                                rules: [{
                                    required: false, message: '请选择经营模式！',
                                }]
                            })(
                                <Select style={{width: '100%'}}>
                                    <Option value={1}>自营</Option>
                                </Select>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="移动电话"
                            hasFeedback
                        >
                            {getFieldDecorator('mobile', {
                                rules: [{
                                    required: true, message: '请填写移动电话！',
                                }]
                            })(
                                <Input />
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="固定电话"
                            hasFeedback
                        >
                            {getFieldDecorator('telephone', {
                                rules: [{
                                    required: true, message: '请填写固定电话！',
                                }]
                            })(
                                <Input />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="邮箱（E-mail）"
                            hasFeedback
                        >
                            {getFieldDecorator('email', {
                                rules: [{
                                    required: true, message: '请填写邮箱！',
                                }]
                            })(
                                <Input />
                            )}
                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="传真"
                            hasFeedback
                        >
                            {getFieldDecorator('tax', {
                                rules: [{
                                    required: false, message: '请填写传真！',
                                }]
                            })(
                                <Input />
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={22}>
                        <FormItem
                            {...formItemLayout2}
                            label="公司网址"
                            hasFeedback
                        >
                            {getFieldDecorator('url', {
                                rules: [{
                                    required: false, message: '请填写公司网址！',
                                }]
                            })(
                                <Input/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={22}>
                        <FormItem
                            {...formItemLayout2}
                            label="公司地址"
                            hasFeedback
                        >
                            {getFieldDecorator('address', {
                                rules: [{
                                    required: false, message: '请填写公司地址！',
                                }]
                            })(
                                <Input/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={22}>
                        <FormItem
                            {...formItemLayout2}
                            label="收件地址"
                            hasFeedback
                        >
                            {getFieldDecorator('recaddress', {
                                rules: [{
                                    required: true, message: '请填写收件地址！',
                                }]
                            })(
                                <Input/>
                            )}
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </Modal>
    );
}

export default connect(({customerManage}) => ({customerManage}))(Form.create()(CreateCustomer))
